import React, { useState, useRef } from 'react';
import { useIntl } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-table';
import { Button } from 'antd';
import style from './index.less';

const TransactionResultQuery: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const actionRef = useRef();

  const columns = [
    {
      title: () => <>{t('form.TransactionNo')}</>,
      // title: '交易编号',
      dataIndex: 'applytitle',
      hideInTable: true,
    },
    {
      title: () => <>{t('form.ApplicationNo')}</>,
      // title: '申请单号',
      dataIndex: 'sehnqingdnahao',
    },
    {
      title: () => <>{t('form.Systemflow')}</>,
      // title: '系统流水',
      dataIndex: 'xitongliushui',
      hideInTable: true,
    },

    {
      title: () => <>{t('form.filingdate')}</>,
      // title: '提交日期',
      dataIndex: 'created_at',
      valueType: 'dateRange',

      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      disable: true,
      title: () => <>{t('form.TransactionType')}</>,
      // title: '交易类型',
      valueType: 'select',
      dataIndex: 'jiaoyileixing',
    },

    {
      // title: '完成日期',
      title: () => <>{t('form.Completiondate')}</>,
      dataIndex: 'wanhcnagriqi',
      valueType: 'dateRange',

      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: () => <>{t('form.State')}</>,
      disable: true,
      // title: '状态',
      dataIndex: 'state',
      valueType: 'select',
    },

    {
      title: () => <>{t('form.Ouraccount')}</>,
      // title: '本方账号',
      dataIndex: 'benfangzhanghao',
    },
    {
      title: () => <>{t('form.Oppositeaccount')}</>,
      // title: '对方账号',
      dataIndex: 'duifangzanghao',
    },
    {
      title: () => <>{t('form.SubmerchantNo')}</>,
      // title: '子商户号',
      dataIndex: 'zishanghuhao',
    },

    {
      title: () => <>{t('form.Ouraccount')}</>,
      disable: true,
      // title: '本方账户',
      dataIndex: 'benfnag',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.Oppositeaccount')}</>,
      disable: true,
      // title: '对方账户',
      dataIndex: 'duifang',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.Salesamount')}</>,
      disable: true,
      // title: '卖出金额',
      dataIndex: 'maichu',
      hideInSearch: true,
    },
    {
      disable: true,
      title: () => <>{t('form.Purchaseamount')}</>,
      // title: '买入金额',
      dataIndex: 'mairu',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '购汇方式',
      title: () => <>{t('form.PurchaseWays')}</>,
      dataIndex: 'gouhuifangsi',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '手续费',
      title: () => <>{t('form.ServiceCharge')}</>,
      dataIndex: 'sjouxufei',
      hideInSearch: true,
    },

    {
      disable: true,
      // title: '原因说明',
      title: () => <>{t('buttons.explain')}</>,
      dataIndex: 'yuanyinshuom',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '提交时间',
      title: () => <>{t('form.Submittime')}</>,
      dataIndex: 'yuanyinshuom',

      hideInSearch: true,
    },
    {
      disable: true,
      // title: '完成时间',
      title: () => <>{t('form.Completetime')}</>,
      dataIndex: 'yuanyinshuom',

      hideInSearch: true,
    },

    {
      // title: '操作',
      title: () => <>{t('form.Option')}</>,
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a key="editable"> {t('form.Close')}</a>,
      ],
    },
  ];

  return (
    <div className={style.ApplicationResultBoss}>
      <ProTable
        style={{ height: '100%' }}
        scroll={{ x: 1500 }}
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}, sort, filter) => {
          console.log('params', params, 'sort', sort, 'filter', filter);

          const data = [
            {
              id: 1,
              shanghao: '11',
              applytitle: '1212121',
            },
            {
              id: 2,
              shanghao: '22',
              maichu: '121312',
            },
            {
              id: 3,
              shanghao: '22',
              maichu: '速度输出',
            },
            {
              id: 4,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
            {
              id: 44,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
            {
              id: 432,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
            {
              id: 42,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
          ];

          return {
            data: data,
          };
        }}
        rowKey="id"
        options={false}
        form={{ labelWrap: true }}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        search={{
          labelWidth: 90,
          // span: 12,
          // optionRender: ({ searchText, resetText }, { form }, dom) => [
          //   <Button
          //     key="searchText"
          //     type="primary"
          //     onClick={() => {
          //       form?.submit();
          //     }}
          //   >
          //     {/* {t("buttons.query")} */}

          //   </Button>,
          //   <Button
          //     key="resetText"
          //     onClick={() => {
          //       form?.resetFields();
          //     }}
          //   >
          //     {/* {t("buttons.Reset")} */}
          //     重置
          //   </Button>,
          // ],
          // collapseRender: (collapsed, showCollapseButton) => {
          //   return collapsed ? (
          //     <Button
          //       type="link"
          //       key="resetText"
          //       onClick={() => {
          //         console.log(
          //           "collapsed, showCollapseButton",
          //           collapsed,
          //           showCollapseButton
          //         );
          //         setShowFlag(collapsed);
          //       }}
          //     >
          //       展开
          //       {/* {t("buttons.Open")} */}
          //     </Button>
          //   ) : (
          //     <Button
          //       type="link"
          //       key="resetText"
          //       onClick={() => {
          //         console.log(
          //           "collapsed, showCollapseButton",
          //           collapsed,
          //           showCollapseButton
          //         );
          //         setShowFlag(collapsed);
          //       }}
          //     >
          //       关闭
          //       {/* {t("buttons.Close")} */}
          //     </Button>
          //   );
          // },
        }}
        // headerTitle="高级表格"
        defaultSize="small"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            {/* 导出 */}
            {t('buttons.Export')}
          </Button>,
        ]}
      />
    </div>
  );
};

export default TransactionResultQuery;
